<template>
    <!--<el-scrollbar ref="scrollbar" id="home" wrap-class="tl-scrollbar-wrapper">-->
    <el-container id="home" class="tl-min-height-100-vh">
        <!--<vue-canvas-nest :config="config" :el="'#home'"></vue-canvas-nest>-->
        <el-header class="home_header tl-overflow-hidden tl-text-no-select tl-padding-0 tl-width-100-percent tl-background-color-transparent"
                   :class="{'home-header-fixed': show, 'not-index': this.$route.path !== '/web/index' }">
            <div class="tl-padding-0-100 tl-v-center">
                <div class="tl-float-left header_logo tl-padding-0-20">
                    <a class="tl-a a-hover tl-height-100-percent tl-v-center" href="/">
                        <!-- <el-avatar class="tl-background-color" size="small" src="https://gitee.com/lzyws739307453/images/raw/master/avatar-black.svg"></el-avatar>-->
                        <span class="tl-font-24-px" style="font-family: 'STXingkai', serif">TopLabs</span>
                    </a>
                </div>
                <div class="tl-float-left header_item tl-clearfix">
                    <el-menu :default-active="activeMenu" mode="horizontal" @select="handleSelect" active-text-color="#0d6efd" router>
                        <el-menu-item index="/web/index">首页</el-menu-item>
                        <el-menu-item index="/web/categories">分类</el-menu-item>
                        <el-menu-item index="/web/archives">归档</el-menu-item>
                        <el-menu-item index="/web/about">关于我</el-menu-item>
                    </el-menu>
                </div>
                <div class="header_dropdown tl-text-right">
                    <div class="search_input">
                        <el-input @keyup.enter.native="searchBlog" v-model="search" size="small" :placeholder="place">
                            <i slot="suffix" class="el-input__icon el-icon-search" @click="searchBlog"></i>
                        </el-input>
<!--                        <i class="el-icon-search search_icon"></i>-->
                    </div>
                </div>
            </div>
        </el-header>
        <el-main class="home_main tl-padding-0">
            <router-view ref="searchBlog" :search.sync="search"></router-view>
        </el-main>
        <el-footer class="tl-padding-0 tl-height-100-percent">
            <Contact class="tl-height-72 tl-vh-center" :placement="'top'"></Contact>
            <el-divider class="tl-width-70-percent tl-margin-0 tl-margin-auto"></el-divider>
            <div style="height: 72px;" class="tl-vh-center tl-color-white">
                <div v-html="site_data.copyright"></div>
            </div>
        </el-footer>
    </el-container>
    <!--</el-scrollbar>-->
</template>

<script>
// import { CursorSpecialEffects } from '@/assets/js/cursor-effects';
import Contact from '@/views/Contact';
import { mapGetters } from 'vuex';
// import vueCanvasNest from 'vue-canvas-nest';
import '@/assets/js/RibbonsEffect'
export default {
    name: 'NavMenu',
    components: { Contact },
    data: function () {
        return {
            activeIndex: '1',
            circleUrl: this.$store.state.avatar_url,
            search: '',
            show: false,
            place: '请输入要搜索的关键词',
            config: {
                color: '0, 0, 0',
                count: 99,
                zIndex: 0,
                opacity: 1
            }
        }
    },
    methods: {
        handleSelect (key, keyPath) {
            console.log(key, keyPath);
        },
        // 头部fixed定位
        handleScroll () {
            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            this.show = scrollTop > 200;
        },
        find: function (str, ch, num) {
            let x = str.indexOf(ch);
            for (let i = 0; i < num; i++) {
                x = str.indexOf(ch, x + 1);
            }
            return x;
        },
        searchBlog: function () {
            this.place = this.search
            if (!this.place) {
                this.place = '请输入要搜索的关键词'
            }
            if (this.$route.path === '/web/search/blog') {
                this.$refs.searchBlog.getBlogList()
            } else {
                this.$router.push('/web/search/blog')
            }
        }
    },
    computed: {
        ...mapGetters(['site_data', 'avatar', 'ribbon']),
        activeMenu () {
            const { meta, path } = this.$route
            return meta.activeMenu ? meta.activeMenu : path
        }
    },
    created: function () {
        // 监听页面滚动事件
        window.addEventListener('scroll', this.handleScroll);
        // new CursorSpecialEffects().init();
        document.getElementById('app').Ribbons(this.ribbon)
    },
    destroyed () {
        window.removeEventListener('scroll', this.handleScroll);
    },
    mounted: function () {
        // const home = document.getElementById('home');
        // home.style.background = 'url("https://s1.ax1x.com/2020/09/02/wp8SRH.png") center center / cover no-repeat fixed rgb(254, 254, 254)';
    }
}
</script>

<style lang="less" scoped>
#home {
    //height: 100%;

    &.el-scrollbar ::v-deep {
        .el-scrollbar__bar {
            z-index: 10;
        }
    }

    .home_header {
        position: fixed; /* 固定作用 */
        top: 0;
        visibility: hidden;
        opacity: 0;
        filter: Alpha(opacity=0);
        z-index: 5;
        transition: background-color 1s, opacity 1s, box-shadow 1s, visibility 1s; /* 过渡动画 */

        .header_logo {
            color: #909399;
            cursor: pointer;

            &:hover {
                color: #303133;
            }

            .a-hover:hover {
                color: inherit !important;
                text-shadow: none !important;
            }
        }

        .header_item {
            .el-menu {
                background-color: transparent !important;
            }

            .el-menu-item {
                background-color: transparent !important;
                border-bottom: none !important;

                .iconfont {
                    margin-right: 5px;
                    transition: background-color .3s, color .3s;
                    //color: white;
                    //position: relative;
                    //bottom: 0.1em;
                }

                &.is-active {
                    .iconfont {
                        color: rgb(13, 110, 253) !important;
                    }
                }

                &:hover, &:focus {
                    .iconfont {
                        outline: none;
                        color: #303133;
                    }
                }
            }
        }

        .header_dropdown {
            flex: 1;

            .search_input {
                position: relative;
                width: 200px;
                display: -ms-inline-flexbox;
                display: inline-flex;
                //color: #DCDFE6 !important;
                ::v-deep .el-input__inner {
                    color: black !important;
                    display: table-cell;
                    border-radius: 20px;
                    padding: 5px 32px 5px 12px;
                    background-color: transparent !important; /* 设置背景透明 */
                    transition: box-shadow 0.1s ease, border-color 0.1s ease;
                    &:focus {
                        //border: #DCDFE6 solid 1px !important;
                        border: #909399 solid 1px !important;
                        + .el-input__suffix .el-input__icon {
                            color: #909399;
                        }
                    }
                }
                ::v-deep i.el-input__icon {
                    cursor: pointer;
                }
                //&:focus-within i.search_icon {
                //    opacity: 1;
                //}

                ::v-deep i.search_icon {
                    cursor: pointer;
                    position: absolute;
                    top: 0;
                    right: 0;
                    margin: 0;
                    height: 100%;
                    width: 40px;
                    opacity: .5;
                    //color: rgba(255, 255, 0, .87) !important;
                    -webkit-transition: opacity .3s ease;
                    transition: opacity .3s ease;
                    display: block;

                    &:after, &:before {
                        left: 0;
                        position: absolute;
                        text-align: center;
                        width: 100%;
                        top: 50%;
                        transform: translate(0, -50%);
                    }
                }
            }
        }
    }

    .home-header-fixed {
        visibility: visible;
        opacity: 1;
        filter: Alpha(opacity=100);
        background-color: #FFFFFF !important;
        //background-color: #fff;
        box-shadow: 0 5px 60px 0 rgb(17 58 93 / 10%);
        //position: -webkit-sticky;
        //position: sticky;
        //top: 0;
        //z-index: 1;
        transition: background-color 1s, opacity 1s, box-shadow 1s, visibility 1s; /* 过渡动画 */
    }

    .not-index {
        position: fixed; /* 固定作用 */
        top: 0;
        opacity: 1 !important;
        visibility: visible !important;
        transition: background-color 1s, opacity 1s, box-shadow 1s, visibility 1s; /* 过渡动画 */
    }

    .home_main {
        min-height: calc(100vh - 205px);
    }
}

.el-footer {
    z-index: 1;
    background-color: rgba(55, 61, 65, .8);
}

.el-col {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.el-avatar {
    font-size: 0;

    ::v-deep img {
        width: 20px !important;
        height: 20px !important;
        display: inline-block;
    }
}
</style>
